import React from 'react'
import ReactDOM from 'react-dom'
import './index.less'
import {NavBar,Icon, Tabs, WhiteSpace, Badge,List,PullToRefresh } from 'antd-mobile';
const tabs = [
    { title: <Badge>全部</Badge> },
    { title: <Badge>收入</Badge> },
    { title: <Badge>支出</Badge> },
  ];
const Item = List.Item;
const Brief = Item.Brief;
function genData() {
    const dataArr = [];
    for (let i = 0; i < 20; i++) {
      dataArr.push(i);
    }
    return dataArr;
  }
export default class GrowthValue extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
          refreshing: false,
          down: false,
          height: document.documentElement.clientHeight,
          data: [],
        };
      }
      componentDidMount() {
        const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
        setTimeout(() => this.setState({
          height: hei,
          data: genData(),
        }), 0);
      }
    render(){
        return(
            <div>
                <NavBar
                    mode="light"
                    leftContent="返回"
                    icon={<Icon type="left" />}
                    onLeftClick={() =>{
                        const {history}=this.props;
                        history.push({pathname:'/mine'});
                    }}
                    rightContent={[
                        <Icon key="1" type="ellipsis" />,
                    ]}
                >成长值明细</NavBar>
                <Tabs tabs={tabs}
                    initialPage={0}
                    onChange={(tab, index) => { console.log('onChange', index, tab); }}
                    onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                    <div>
                    <PullToRefresh
                        damping={60}
                        ref={el => this.ptr = el}
                        style={{
                        height: this.state.height,
                        overflow: 'auto',
                        }}
                        indicator={this.state.down ? {deactivate:'下拉加载'} : { deactivate: '上拉可以刷新' }}
                        direction={this.state.down ? 'down' : 'up'}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                        this.setState({ refreshing: true });
                        setTimeout(() => {
                            this.setState({ refreshing: false });
                        }, 1000);
                        }}
                    >
                        {this.state.data.map(i => (
                        <div key={i}>
                            <List renderHeader={() => ''} className="my-list">
                                <Item multipleLine extra="extra content">
                                {this.state.down ? 'pull down' : 'pull up'} <Brief> {i}</Brief>
                                </Item>
                            </List>
                        </div>
                        ))}
                    </PullToRefresh>
                    </div>
                        
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of second tab
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '150px', backgroundColor: '#fff' }}>
                        Content of third tab
                    </div>
                </Tabs>
            </div>
        );
    }
}